<template>
	<view class="container">
		<view class="form">
			<view class="list-cell b-b m-t" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">头像</text>
				<view class="cell-tip" @click="openUserInfo('头像','userIcon')">
					<image class="img" :src="userInfo.userIcon || '/static/missing-face.png'"></image>
				</view>
				<text class="cell-more iconfont icon-you" @click="openUserInfo('头像','userIcon')"></text>
			</view>
			<view class="list-cell b-b" hover-class="cell-hover" :hover-stay-time="50"
			 @click="openUserInfo('昵称','nickName')">
				<text class="cell-tit">昵称</text>
				<text class="cell-tip">{{userInfo.nickName}}</text>
				<text class="cell-more iconfont icon-you"></text>
			</view>
			<view class="list-cell b-b" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">手机号</text>
				<text class="cell-tip">{{userInfo.userName}}</text>
			</view>
			<view class="list-cell b-b" @click="navTo('/userPages/address')" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">地址</text>
				<text class="cell-tip">{{addressData.address||''}}</text>
				<text class="cell-more iconfont icon-you"></text>
			</view>
			<!-- <view class="list-cell b-b" hover-class="cell-hover" :hover-stay-time="50"
				@click="navTo('/userPages/legal')">
				<text class="cell-tit">用户协议</text>
				<text class="cell-more iconfont icon-you"></text>
			</view> -->
		</view>
		<view class="form" v-if="userInfo.userType == 2">
			<view class="list-cell b-b" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">可接单</text>
				<view class="cell-tip">
					<switch :disabled="disabled" v-model="userInfo.workStatus" :checked="isDefault" color="#007AFF" @change="switchChange"/>
				</view>
			</view> 
		</view>
		<text class="btn-link" @click="toLogout">退出登录</text>
		<!--弹窗-->
		<uni-pop type="confirm"
			v-model="popData.isShow"
			:title="popData.title"
      :showClose="true"
      class="pop-box"
    >
      <template slot="content">
        <view class="row"
					v-if="popData.name == 'nickName'">
          <input class="input" v-model="editor.nickName" placeholder="请填写" :maxlength="10" />
        </view>
				<view class="uploadImg"
					v-if="popData.name== 'userIcon'">
					<upload-images :length="1" :images="editor.userIcon" @confirm="getImg($event,'userIcon')"></upload-images>
				</view>
      </template>
      <template slot="commit">
        <view class="btn-link btn-pop" @click="userCommit">
          保存
        </view>
      </template>
    </uni-pop>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'; 
	import uploadImages from "@/components/upload-images.vue"
	export default {
		components:{
			uploadImages
		},
		data() {
			return {
				addressData:{},
				editor:{},
				popData:{},
				isDefault:false
			};
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		onLoad(){
			this.pageInit()
			this.listConsignee()
		},
		methods:{
			...mapMutations(['login','logout']),
			navTo(url){
				uni.navigateTo({
					url: url
				})
			},
			async pageInit(type) {
				const {code, data} = await this.$apis.postApi('/user/getById',{})
				this.isLoad = true
				console.log("data == " + JSON.stringify(data))
				if(code==200){
					this.isDefault = data.workStatus==1?true:false
					this.disabled = !data.address
					if(type=='update'){
						this.login(data)
					}
					this.form = data
					if(data.address){
						let arr = data.address.split('|') 
						this.form.address = arr[0]
						this.form.street = arr[1]
					}
				}
			},
			//退出登录
			toLogout(){
				uni.showModal({
					content: '亲，您确定要退出登录吗？',
					success: (e)=>{
						if(e.confirm){
							this.logout();
							setTimeout(()=>{
								uni.navigateBack();
							}, 200)
						}
					}
				})
			},
			switchChange(e){
				//console.log("this.form==" + JSON.stringify(this.form))
				this.isDefault = e.target.value
				this.form.workStatus=this.isDefault?1:2
				this.$apis.postApi('/user/changeWorkStatus', {workStatus: this.form.workStatus}).then(({code,message}) => {
					if(code==200){
						this.$api.msg('设置成功')
						this.login(this.form)
					} else {
						this.$api.msg(message)
						//this.isDefault = !this.isDefault
						//this.form.status==1?2:1
					}
				})
			},
			async listConsignee() {
				const params = {
					userId: this.userInfo.userId
				}
				const { code,data } = await this.$apis.postApi('/address/getDefault',params)
				this.isloadAddress = true
				if(code == 200) {
					const region = [data.provinceCode,data.cityCode,data.districtCode]
					data.region = region
					this.addressData = data
				} else {
					this.addressData = {}
				}
			},
			userCommit(){
        if(!this.editor[this.popData.name]){
          this.$api.msg(this.popData.title.slice(2)+'不能为空');
          return
        }
				this.$apis.postApi('/user/update',this.editor).then(({code,message}) => {
					if(code==200){
						this.$api.msg('保存成功')
						this.popData.isShow = false
						this.login(this.editor)
					} else {
						this.$api.msg(message)
					}
				})
      },
			getImg($event,type){
        this.editor[type] = $event[0].src
      },
			openUserInfo(title,name){
				this.popData = {
					isShow: true,
					title:'修改'+title,
					name:name
				}
				this.editor = {...this.userInfo}
			},
		}
	}
</script>

<style lang='scss' scoped>
	.container{
		.pop-box{
			.btn-pop{
				width: 420upx;
			}
			.uploadImg{
				margin: 50upx auto 0;
				width: 200upx;
			}
			.row{
				margin-top: 40upx;
				display: flex;
				align-items: center;
			}
			.input{
				flex:1;
				background: #F6F9FF;
				border-radius: 16upx;
				text-align: left;
				box-sizing: border-box;
				padding: 20upx 24upx;
				min-height: 100upx;
				&.textarea{
					height: 160upx;
				}
			}
		}
		.btn-link{
			height: 88upx;
			margin: 80upx 20upx 48upx;
		}
	}
	.form{
		padding: 0 24upx;
		margin: 20upx;
		background: #fff;
		display: block;
		overflow: hidden;
		box-shadow: 0rpx 4rpx 14rpx 0rpx rgba(218,229,249,0.49);
		border-radius: 16rpx;
	}
	.list-cell{
		display:flex;
		min-height:100upx;
		align-items:center;
		padding: 20upx 0;
		position:relative;
		background: #fff;
		justify-content: center;
		&.log-out-btn{
			margin-top: 40upx;
			.cell-tit{
				color: $uni-color-primary;
				text-align: center;
				margin-right: 0;
			}
		}
		&.cell-hover{
			background:#fafafa;
		}
		&.m-t{
			margin-top: 16upx; 
		}
		.cell-tit{
			flex: 1;
			font-size: 30upx;
			color: $font-color-black;
			margin-right:30upx;
			white-space: nowrap;
		}
		.cell-tip{
			font-size: 30upx;
			color: #444444;
		}
		.img{
			width: 80upx;
			height: 80upx;
			border-radius: 100%;
			position: absolute;
			top: 10upx;
			right: 60upx;
			background: #D8D8D8;
		}
	}
</style>
